<template>
  <div class="user">
    <!-- 个人信息 -->
    <div class="info">
      <div class="sign">
        <van-icon name="completed" class="completed" @click="signHandel" />
      </div>
      <div class="photo">
        <img :src="photo | dalImg" alt="" />
        <div class="total">
          <p>{{ nickName }}</p>
          <p>
            积分
            <span>{{ total }}</span>
          </p>
        </div>
      </div>
      <ul class="like-info">
        <li>
          <p>1</p>
          <p>收藏</p>
        </li>
        <li>
          <p>0</p>
          <p>关注</p>
        </li>
        <li>
          <p>2</p>
          <p>优惠券</p>
        </li>
      </ul>
    </div>
    <!-- 我的订单 -->
    <div class="order">
      <h4>
        我的订单
        <router-link
          style="color: orange; font-size: 0.9rem"
          :to="{ name: 'UserOrders' }"
          >全部订单
          <van-icon name="arrow" />
        </router-link>
      </h4>
      <van-grid :column-num="4" :border="false">
        <van-grid-item icon="balance-pay" text="待付款" />
        <van-grid-item icon="tosend" text="待发货" />
        <van-grid-item icon="logistics" text="待收货" />
        <van-grid-item icon="sign" text="已完成" />
      </van-grid>
    </div>
    <!-- 我的服务 -->
    <div class="serve">
      <h4>我的服务</h4>
      <div class="serve-con">
        <van-cell
          class="cell"
          title="修改密码"
          style="color: rgb(255, 111, 0)"
          is-link
          icon="records"
          :to="{ name: 'ChangePsw' }"
        />
        <van-cell
          class="cell"
          title="修改个人信息"
          style="color: rgb(255, 111, 0)"
          is-link
          icon="edit"
          :to="{ name: 'ModifyInfo' }"
        />
        <van-cell class="cell" title="地址管理" is-link icon="location-o" />
        <van-cell class="cell" title="关于我们" is-link icon="phone-o" />
      </div>
      <van-button class="quit" type="warning" block @click="logOutHandel"
        >退出</van-button
      >
    </div>
  </div>
</template>

<script>
import { removeToken } from "../utils/tools";
import { loadUserInfoAPI, signInAPI } from "../services/auth";
import { Toast } from "vant";
export default {
  data() {
    return {
      photo: "",
      nickName: "",
      total: 0,
    };
  },
  async created() {
    this.loadInfoHandel();
  },
  methods: {
    async loadInfoHandel() {
      const res = await loadUserInfoAPI();
      // console.log(res);
      this.photo = res.data.avatar;
      this.nickName = res.data.nickName;
      this.total = res.data.score;
    },
    logOutHandel() {
      removeToken();
      this.$router.push({
        name: "Home",
      });
    },
    // 签到功能
    async signHandel() {
      // console.log("签到");
      const res = await signInAPI();
      // console.log(res);
      if (res.code) {
        Toast.success(res.msg);
        this.loadInfoHandel();
      }
    },
  },
};
</script>

<style>
p {
  padding: 0.5rem 0;
}
.user .info {
  height: 36%;
  background-color: aqua;
  box-sizing: border-box;
  padding: 1rem;
  background: url("../assets/bg.png") no-repeat center/cover;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.user .info .sign {
  align-self: flex-end;
  font-size: 1.5rem;
  color: rgb(234, 123, 26);
}
.photo {
  display: flex;
  margin: 1rem 0;
  color: #fff;
}
.photo img {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  margin-right: 1rem;
}
.like-info {
  display: flex;
  width: 100%;
  justify-content: center;
}
.like-info li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.like-info li p {
  line-height: 0.8rem;
  color: #fff;
  font-weight: bold;
}
.order {
  margin-bottom: 0.5rem;
}
.order h4 a {
  color: rgb(144, 142, 142);
}
.order h4,
.serve h4 {
  padding: 1rem 1rem;
  background: #fff;
  box-sizing: border-box;
  margin: 0;
}
.order h4 a {
  float: right;
  font-size: 0.8rem;
}
.cell {
  padding-top: 1rem;
}
.cell:hover {
  background-color: rgb(240, 243, 241);
}
.quit {
  font-size: 1rem;
  margin-top: 0.8rem;
}
</style>